<template>
  <div v-if="isMultiTenancyEnabled" class="card tenant-change-component">
    <div class="body">
      <span>
        {{ l('CurrentTenant') }}:
        <span v-if="tenancyName" :title="name">
          <strong>{{ tenancyName }}</strong>
        </span>
        <span v-if="!tenancyName">{{ l('NotSelected') }}</span>
        (
        <a href="javascript:;" @click="showChangeModal()">{{ l('Change') }}</a>
        )
      </span>
    </div>
  </div>
</template>

<script lang="ts">
  import { AppComponentBase } from '/@/shared/component-base';
  import { appSessionService, abpService } from '/@/shared/abp';
  import TenantChangeModal from './tenant-change-modal.vue';
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'tenant-change',
    mixins: [AppComponentBase],
    data() {
      return {};
    },
    computed: {
      tenancyName: () => {
        if (!appSessionService.tenant) {
          return undefined;
        }
        return appSessionService.tenant.tenancyName;
      },
      name: () => {
        return appSessionService.tenant.name;
      },
      isMultiTenancyEnabled: () => {
        return abpService.abp.multiTenancy.isEnabled;
      },
    },
    methods: {
      showChangeModal() {
        this.modalHelper
          .create(TenantChangeModal, {
            tenancyNames: this.tenancyName,
            width: 592,
          })
          .subscribe(() => {});
      },
    },
  });
</script>

<style lang="less" scoped>
  @import './tenant-change.less';
</style>
